<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商户列表</title>
    <link href="__STATIC__/layui/css/layui.css" rel="stylesheet">
    <style>
        body {
            padding: 6px 16px;
        }

        .demo-carousel {
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 20px
        }

        .layui-table-cell {
            height: auto;
        }

        .container {
            overflow: hidden;
            white-space: nowrap;
            width: 100%;
        }

        .notification {
            display: inline-block;
            animation: scroll-left 15s linear infinite;
        }

        @keyframes scroll-left {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
            }
        }
    </style>
</head>
<body>

<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label" style="background-color: #99D3FF">选择状态</label>
        <div class="layui-input-inline">
            <select name="status">
                {volist name="list" id="vo"}
                <option value="{$key}">{$vo}</option>
                {/volist}
            </select>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="hidden" name="id" value="{$id}">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
        </div>
    </div>
</form>





<script src="__STATIC__/layui/layui.js"></script>
<script>
    layui.use(function () {
        // 得到需要的内置组件
        var layer = layui.layer; //弹层
        var laypage = layui.laypage; //分页
        var laydate = layui.laydate; //日期
        var table = layui.table; //表格
        var carousel = layui.carousel; //轮播
        var upload = layui.upload; //上传
        var element = layui.element; //元素操作
        var slider = layui.slider; //滑块
        var dropdown = layui.dropdown; //下拉菜单
        var $ = layui.jquery;
        var util = layui.util;
        var form = layui.form;

        //提交
        form.on('submit(formDemo)', function(data){
            // layer.msg(JSON.stringify(data.field));

            var fieldData=data.field;

            $.ajax({
                type: 'POST',
                url: "{:url('index/changeStatus')}",
                dataType: 'json',
                data: fieldData,
                success: function (data) {
                    if (data.code == 200) {
                        layer.msg(data.msg, {icon: 1, time: 2000,end: function () {
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index); //再执行关闭
                                parent.window.location.reload(true);
                            }});
                    } else {
                        layer.msg(data.msg, {icon: 2, time: 2000});
                    }

                },
                error: function (data) {
                    layer.msg('网络错误,稍后再试...', {icon: 2, time: 2000});
                }
            });

            return false;
        });

        util.event('lay-active', {
            le_del: function (othis) {
                id = othis.context.dataset.id;
                cid = othis.context.dataset.cid;
                console.log(othis.context.dataset)
                layer.confirm('确认要删除吗？', function (index) {
                    $.ajax({
                        type: 'POST',
                        url: "{:url('index/delProgress')}",
                        dataType: 'json',
                        data: {id: id, cid: cid},
                        success: function (data) {
                            if (data.code == 200) {
                                $(othis).parent("p").remove();
                                layer.msg('删除成功!', {icon: 1, time: 2000});

                            } else {
                                layer.msg(data.msg, {icon: 2, time: 2000});
                            }

                        },
                        error: function (data) {
                            layer.msg('网络错误,稍后再试...', {icon: 2, time: 2000});
                        }
                    });
                });
            }
        });


        //日期时间范围
        laydate.render({
            elem: '#test10'
            , type: 'datetime'
            , range: true
        });

        $('#cpwd').on('click', function () {
            layer.prompt({
                title: '修改密码',
                formType: 2
            }, function (text, index) {
                $.ajax({
                    type: "post",
                    url: "{:url('index/saveProgress')}",
                    data: {
                        content: text
                    },
                    dataType: 'json',
                    success: function (data) {
                        layer.close(index);
                        if (data.code == 400) {
                            layer.msg(data.msg, {
                                time: 1200,
                                icon: 0,
                            });
                        } else if (data.code == 200) {
                            layer.msg(data.msg, {
                                time: 1200,
                                icon: 1,
                                end: function () {
                                    window.location.reload(true);
                                }
                            });
                        }
                    }
                });
            });
        });


        $('#cpwd').on('click', function () {
            layer.prompt({
                title: '修改密码',
                formType: 2
            }, function (text, index) {
                $.ajax({
                    type: "post",
                    url: "{:url('index/changePwd')}",
                    data: {
                        pwd: text
                    },
                    dataType: 'json',
                    success: function (data) {
                        layer.close(index);
                        if (data.code == 400) {
                            layer.msg(data.msg, {
                                time: 1200,
                                icon: 0,
                            });
                        } else if (data.code == 200) {
                            layer.msg(data.msg, {
                                time: 1200,
                                icon: 1,
                                end: function () {
                                    window.location.reload(true);
                                }
                            });
                        }
                    }
                });
            });
        });

        $('#cphone').on('click', function () {
            layer.prompt({
                title: '修改联系电话',
                formType: 2
            }, function (text, index) {
                $.ajax({
                    type: "post",
                    url: "{:url('index/changePhone')}",
                    data: {
                        phone: text
                    },
                    dataType: 'json',
                    success: function (data) {
                        layer.close(index);
                        if (data.code == 400) {
                            layer.msg(data.msg, {
                                time: 1200,
                                icon: 0,
                            });
                        } else if (data.code == 200) {
                            layer.msg(data.msg, {
                                time: 1200,
                                icon: 1,
                                end: function () {
                                    window.location.reload(true);
                                }
                            });
                        }
                    }
                });
            });
        });


        $('#loginOut').on('click', function () {
            $.ajax({
                type: "get",
                url: "{:url('Login/loginOut')}",
                success: function (jsonData) {
                    if (jsonData.code == 200) {
                        layer.msg('退出成功！', {
                            icon: 1,
                        });
                        location.href = "{:url('Login/Login')}";
                    } else {
                        layer.msg('退出失败', {
                            icon: 2,
                        });
                    }
                }
            });
        });

        $('#search').on('click', function () {
            var username = $('[name="username"]').val();
            var phone = $('[name="phone"]').val();
            var stime = $('#test10').val();
            var pro_id = $('[name="pro_id"]').val();
            var cityname = $('[name="cityname"]').val();

            // 重载 - 这里以搜索为例
            table.reload('tableOne', {
                where: { //设定异步数据接口的额外参数，任意设
                    clue_name: username
                    , phone: phone
                    , times: stime
                    , pro_id: pro_id
                    , cityname: cityname
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false

        });

        //监听指定开关
        form.on('switch(switchTest)', function (data) { //根据lay-filter进行监听

            var is_rel = this.checked ? "1" : "0"; //锁定状态赋值为1，未锁定赋值为2，根据数据库中的值
            $.ajax({
                url: '{:url("merchant/changeStatus")}',
                type: 'post',
                data: {
                    'id': data.elem.attributes['userId'].nodeValue,
                    'status': is_rel
                },
                success: function (res) {
                    console.log(res);
                },
                dataType: 'json'
            });
            form.render();
        });


        // Tab 切换
        element.on('tab(demo)', function (data) {
            layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
                tips: 1
            });
        });

        // 执行一个 table 实例
        table.render({
                elem: '#demo'
                , id: 'tableOne'
                , url: "{:url('merchant/lists')}" //数据接口（此处为静态数据，仅作演示）
                , title: '商户列表'
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: [  'prev', 'page', 'next', 'skip','count',] //自定义分页布局
                ,theme: '#1E9FFF'
                //,curr: 5 //设定初始在第 5 页
                ,groups: 8 //只显示 1 个连续页码
                ,first: '首页'
                ,last: '尾页'
                ,prev: '<em>上一页</em>'
                ,next: '<em>下一页</em>'
            }
                , limit: 10
                , toolbar: '#toolbarDemo'  //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                , defaultToolbar: ['filter']
                , totalRow: true //开启合计行
                , response: {
                    statusCode: 200 //规定成功的状态码，默认：0
                    , countName: 'total' //规定数据总数的字段名称，默认：count
                }
                , cols: [[ //表头
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: 'ID', width: 120, sort: true, fixed: 'left'}
                    , {field: 'username', title: '账号', width: 150}
                    , {field: 'mer_name', title: '商户名', width: 200}
                    , {field: 'phone', title: '联系电话', width: 150}

                , {
                    field: 'status', title: '状态', width: 100, templet: function (res) {
                        if (res.status == 1) {
                            return '<input type="checkbox" checked="checked" name="is_del" lay-filter="switchTest" lay-skin="switch" lay-text="正常|停用" userId=' + res.id + '>'
                        } else if (res.status == 0) {
                            return '<input type="checkbox" name="is_del" lay-filter="switchTest" lay-skin="switch" lay-text="正常|停用" userId=' + res.id + '>'
                        }
                    }
                }

                    , {field: 'create_time', title: '时间', width: 200}
                    , {templet: '#dataTpl', width: 200, align: 'center', title: '操作'}
                ]],
                done: function (res, curr, count) {
                    $(".layui-table-main tr").each(function (index, val) {
                        $($(".layui-table-fixed-l .layui-table-body tbody tr")[index]).height($(val).height());
                        $($(".layui-table-fixed-r .layui-table-body tbody tr")[index]).height($(val).height());
                    });
                }
            }
        );

        // 头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    
                    layer.msg('添加');
                    break;
                case 'update':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：' + checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            }
            ;
        });

        // 单元格工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                layer.msg('查看操作');
            } else if (layEvent === 'more') {
                //下拉菜单
                dropdown.render({
                    elem: this //触发事件的 DOM 对象
                    , show: true //外部事件触发即显示
                    , data: [{
                        title: '编辑'
                        , id: 'edit'
                    }, {
                        title: '删除'
                        , id: 'del'
                    }]
                    , click: function (menudata) {
                        if (menudata.id === 'del') {
                            layer.confirm('真的删除行么', function (index) {
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.close(index);
                                //向服务端发送删除指令
                            });
                        } else if (menudata.id === 'edit') {
                            layer.msg('编辑操作，当前行 ID:' + data.id);
                        }
                    }
                    , align: 'right' //右对齐弹出
                    , style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
                })
            } else if (layEvent === 'add') {
                // layer.open({
                //     type: 2
                //     ,title: '订单发货'
                //     ,content: '{:url("order.order/delivery")}?id='+data.id
                //     ,area: ['90%', '90%']
                //     ,yes: function(index, layero){
                //
                //     }
                // })
                var cid = data.id;
                layer.prompt({
                    title: '跟着记录内容',
                    formType: 2
                }, function (text, index) {
                    $.ajax({
                        type: "post",
                        url: "{:url('index/saveProgress')}",
                        data: {
                            content: text,
                            cid: cid
                        },
                        dataType: 'json',
                        success: function (data) {
                            layer.close(index);
                            if (data.code == 400) {
                                layer.msg(data.msg, {
                                    time: 1200,
                                    icon: 0,
                                });
                            } else if (data.code == 200) {
                                layer.msg(data.msg, {
                                    time: 1200,
                                    icon: 1,
                                    end: function () {
                                        window.location.reload(true);
                                    }
                                });
                            }
                        }
                    });
                });
            }
        });


        // 分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            , count: 1000 //数据总数
            , limit: 10 //每页显示的数据条数
            , skin: '#1E9FFF' //自定义选中色值
            //,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
            , jump: function (obj, first) {
                if (!first) {
                    layer.msg('第' + obj.curr + '页', {offset: 'b'});
                }
            }
        });

        // 滑块
        var sliderInst = slider.render({
            elem: '#sliderDemo'
            , input: true //输入框
        });

    });
</script>
</body>
</html>
